<!DOCTYPE html>
<html lang="zh">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>内网监控系统</title>
    <meta name="description" content="内网监控系统">
    <meta name="keywords" content="内网监控系统">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/plugins/elementui/index.css">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/content.css">
</head>
<body class="gray-bg">
<div id="app">
    <template>
        <div class="filter-container" style="margin: 10px 0 20px 0;">
            <el-input placeholder="角色名" v-model="queryString" style="width: 200px;" class="filter-item"
                      @keyup.enter.native="search"></el-input>
            <el-button @click="search" class="dalfBut">查询</el-button>
        </div>
    </template>

    <!-- 展示列表数据 -->
    <template>
        <el-table :data="tableData" stripe style="width: 100%;">
            <el-table-column label="序号" width="60">
                <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>

            <el-table-column label="角色名" width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.roleName }}</span>
                </template>
            </el-table-column>

            <el-table-column label="创建者" width="130">
                <template slot-scope="scope">
                    <span>{{ scope.row.createBy }}</span>
                </template>
            </el-table-column>

            <el-table-column label="创建时间" width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 3px">{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="角色描述">
                <template slot-scope="scope">
                    <span>{{ scope.row.description }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleShowEdit(scope.$index, scope.row)">编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <!-- 编辑标签弹层 -->
    <template>
        <el-dialog title="编辑角色信息" :visible.sync="dialogFormVisible4Edit">
            <el-form :model="editFormData" label-width="100px">
                <el-form-item label="角色名">
                    <el-input v-model="editFormData.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model="editFormData.description"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleEdit">确定</el-button>
                    <el-button @click="dialogFormVisible4Edit=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </template>
</div>
</body>

<!-- 引入组件库 -->
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/plugins/elementui/index.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            queryString: "",
            tableData: [], //当前页要展示的列表数据
            editFormData: {},
            dialogFormVisible4Edit: false
        },
        created() {
            this.findAll();
        },
        methods: {
            // 查询所有
            findAll() {
                axios.get("/role/findAll").then(res => {
                    if (res.data.flag) {
                        this.tableData = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            },

            // 模糊搜索
            search() {
                axios.get("/role/search?queryString=" + this.queryString).then(res => {
                    if (res.data.flag) {
                        this.tableData = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            },

            // 弹出编辑窗口
            handleShowEdit(index, row) {
                // console.log(index, row);
                //弹出编辑窗口
                this.dialogFormVisible4Edit = true;
                var id = row.roleId;
                axios.get("/role/findById?roleId=" + id).then(res => {
                    if (res.data.flag) {
                        this.editFormData = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            },

            // 编辑
            handleEdit() {
                axios.post("/role/update", this.editFormData).then(res => {
                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? "success" : "error"
                    });
                    if (res.data.flag) {
                        //关闭编辑窗口
                        this.dialogFormVisible4Edit = false;
                        //刷新列表数据
                        this.findAll();
                    }
                });
            },

        } // end methods
    });
</script>
</html>